import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button,Pagination,Select,message,Popconfirm,Divider,Modal} from 'antd';
import styles from './index.less';
const Option = Select.Option;
const Pages = ({ check, dispatch, loading }) => {
    const divumns = [
        {
            title: '巡检点编号',
            dataIndex: 'num',
        },
        {
            title: '巡检点名称',
            dataIndex: 'name',
        },
        {
            title: '巡检点位置',
            dataIndex: 'location',
        },
        {
            title: '⽣成巡检点巡检⼆维码',
            dataIndex: 'pic_url',
            render:text=><img onClick={()=>dispatch({type:'check/save',payload:{pic_url:text,imgview:true}})} style={{width:60,height:60}} src={text}/>,
        },
        {
            title: '检查项目',
            dataIndex: 'item_id',
            render:(text,record) => <a onClick={()=>{
                localStorage.setItem("hrefid",record.id);
                dispatch({type:'app/goToPath',payload:'Inspectionproject'});
            }}>{text && text.map(item =>{
                    return <div key={item.id}>*{item.item_name}</div>;
                })}</a>,
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"check/deleteChack",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"check/goList",payload:{record:record}});
                }}>查看</a>
            </div>,
        },
    ];

    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...check} loading={loading.global}/>
            <Modal visible={check.imgview} footer={null} onCancel={()=>dispatch({type:'check/save',payload:{imgview:false}})}>
                <img alt="example" style={{ width: '100%' }} src={check.pic_url} />
            </Modal>
            <Table
                columns={divumns}
                rowKey={id=>id.id}
                pagination={false}
                size="small"
                loading={loading.global}
                dataSource={check.getCheckData || null} />
            {check.Pagination && <Pagination current={check.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={check.total}
                onChange={pages => { !loading.global && dispatch({type:'check/inputOut',payload:{pages:pages}});}}/>}
        </div>
    );
};


class PagesGET extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            name: "",
            num :"",
            location:"",
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"check/getCheck",payload:{
            name:"",
            location :"",
            num:'',
            route_id:localStorage.getItem("hrefid")?localStorage.getItem("hrefid"):'',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){
        let {dispatch,pages} = this.props;

        return(
            <div className={styles.containerit}>
                <Input value={this.state.name} placeholder="巡检点名称" style={{margin:10,width:256}} onChange={e=>this.setState({name:e.target.value})}/>
                {/*<Input value={this.state.num } placeholder="巡检点编号" style={{margin:10,width:256}} onChange={e=>this.setState({num :e.target.value})} />*/}
                <Input value={this.state.location} placeholder="检查点位置" style={{margin:10,width:256}} onChange={e=>this.setState({location :e.target.value})} />
                <Button type='primary' onClick={()=>{
                    let {name,num,location} = this.state;
                    this.props.dispatch({type:"check/getCheck",payload:{
                        name:name,
                        location :location,
                        num:num,
                        route_id:"",
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{marginLeft:10}} onClick={()=>{
                    this.setState({
                        name:'',
                        location :'',
                    });
                }
                }>重置</Button>
                <Button style={{margin:10}} onClick={()=>
                    dispatch({type:"check/goList",payload:{record:{id:'NEW'}}})
                }>新增巡检点</Button>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if(nextProps.pages !== this.props.pages){
            let {name,location,num} =this.state;
            this.props.dispatch({type:"check/getCheck",payload:{
                name:name,
                location :location,
                num:num,
                route_id:"",
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}


Pages.propTypes = {
    check: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ check, loading }) => ({ check, loading }))(Pages);
